<%@ page contentType="text/html;charset=UTF-8" language="java" %>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>用户列表</title>
    <link rel="stylesheet" href="/static/bootstrap3/css/bootstrap.min.css">
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/static/jquery-easyui-1.3.3/jquery.min.js"></script>
    <script type="text/javascript" src="/static/bootstrap3/js/bootstrap.min.js"></script>

    <script>
        $(document).ready(function () {
            load_user();

        });
        function load_user() {
            $.ajax({
                url: "/user/showUser",
                type: "post",
                dataType: "json",
                data: {},
                success: function (data, state) {
                    var str = "<table class=\"table table-hover\"  border=\"1\"  cellspacing=\"0\" align=\"center\" text-align:center>";
                    str += "<tr><td>编号</td><td>姓名</td><td>用户名</td><td>密码</td><td>创建日期</td><td>修改日期</td>" +
                        "<td colspan='2'>编辑</td></tr>";
                    $.each(data, function (i, item) {
                        str += "<tr>";
                        str += "<td>" + item.id + "</td>";
                        str += "<td>" + item.zhname + "</td>";
                        str += "<td>" + item.name + "</td>";
                        str += "<td>" + item.pwd + "</td>";
                        var createdate = mydate(item.createtime);
                        str += "<td>" + createdate + "</td>";
                        var updatedate = mydate(item.updatetime);
                        str += "<td>" + updatedate + "</td>";

                        str += "<td>" +
                            "<input type='checkbox' value='" + item.id + "'/>" +
                            "&nbsp;&nbsp;&nbsp;&nbsp;" +
                            "<button class='btn btn-inverse' class=\"btn btn-primary btn-lg\" data-toggle=\"modal\" data-target=\"#myModal\" onclick='update($(this).val());' value='" + item.id + "'>" +
                            "修改" +
                            "</button>" +
                            "</td>";
                        str += "</tr>";
                        $("#list").html(str);
                    });
                    str += "</table>"

                }
            });
        }


        function mydate(var1) {
            var date = new Date(var1);
            Y = date.getFullYear() + '-';
            M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
            D = date.getDate() + ' ';
            h = date.getHours() + ':';
            m = date.getMinutes() + ':';
            s = date.getSeconds();
            return Y + M + D + h + m + s;

        }

        function update(id) {
            $.ajax({
                url: "/user/old",
                type: "post",
                dataType: "json",
                data: {
                    'id': id,
                },
                success: function (data) {
                    $("#ID").val(id),
                        $("#username").val(data.name);
                    $("#password").val(data.pwd);

                }
            });
        }


        function deleteuser() {
            var idss =[];
            var check;  //判断是否选中
            $("input[type='checkbox']:checked").each(function () {
                if (idss.length!=null) { //判断是否选中
                    check = true; //只要有一个被选择 设置为 true
                }
            });
            if (check) {
                $("input[type='checkbox']:checked").each(function() {
                    //遍历所有的name为selectFlag的 checkbox
                   idss.push($(this).val()); //将选中的值 添加到 array中

                })
//          传参数给后台
            } else {
                alert("请至少选择一个用户");
            }

            $.ajax({
                url: "/user/deleteUser",
                type: "post",
                dataType: "text",
                data: {
                    'idss': idss,
                },
                success: function (data) {
                    if (data = null) {

                        load_user();
                    } else {
                        alert("删除成功");
                        load_user();
                    }

                }
            });
        }


        function user_query() {
            var select_name = document.getElementById("select_name").value;

            $.ajax({
                url: "/user/user_query",
                type: "post",
                dataType: "json",
                data: {
                    'select_name': select_name,

                },
                success: function (data, state) {
                    var str = "<table class=\"table table-hover\"  border=\"1\"  cellspacing=\"0\" align=\"center\" text-align:center>";
                    str += "<tr><td>编号</td><td>姓名</td><td>用户名</td><td>密码</td><td>创建日期</td><td>修改日期</td>" +
                        "<td colspan='2'>编辑</td></tr>";
                    $.each(data, function (i, item) {
                        str += "<tr>";
                        str += "<td>" + item.id + "</td>";
                        str += "<td>" + item.zhname + "</td>";
                        str += "<td>" + item.name + "</td>";
                        str += "<td>" + item.pwd + "</td>";
                        var createdate = mydate(item.createtime);
                        str += "<td>" + createdate + "</td>";
                        var updatedate = mydate(item.updatetime);
                        str += "<td>" + updatedate + "</td>";

                        str += "<td>" +
                            "<input type='checkbox' value='" + item.id + "'/>" +
                            "&nbsp;&nbsp;&nbsp;&nbsp;" +
                            "<button class='btn btn-inverse' class=\"btn btn-primary btn-lg\" data-toggle=\"modal\" data-target=\"#myModal\" onclick='update($(this).val());' value='" + item.id + "'>" +
                            "修改" +
                            "</button>" +
                            "</td>";
                        str += "</tr>";
                        $("#list").html(str);
                    });
                    str += "</table>"

                }

            })

        }


        function saveuser() {
            $.ajax({
                url: "/user/save",
                type: "post",
                dataType: "json",
                data: {
                    'id': $("#ID").val(),
                    'username': $("#username").val(),
                    'password': $("#password").val(),

                },
                success: function () {

                }
            });
        }

        function hide() {
            $('#myModal').modal('hide');
            load_user();
        }


    </script>


</head>

<body>

<input type="text" value="用户名" id="select_name" onblur="javascript:if(this.value=='')this.value='用户名';"
       onfocus="javascript:if(this.value=='用户名')this.value='';"/>&nbsp
<button type="button" class="btn btn-primary" onclick="user_query()">查询</button>
<button type="button" class="btn btn-primary" onclick="load_user()">刷新</button>
<button id="Delete" name="Delete" type="button" class="btn btn-primary" onclick="deleteuser()">删除用户</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModa2" data-whatever="@fat">
    修改用户
</button>
<div id="list"></div>


<!-- Modal① -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">修改用户信息</h4>
            </div>
            <div class="modal-body" style="margin:0px auto">
                <p>&nbsp&nbsp&nbspI&nbsp&nbsp&nbspD&nbsp&nbsp&nbsp:&nbsp&nbsp<input type="text" name="ID" id="ID"/></p>
                <p>用户名： <input type="text" name="username" id="username"/></p>
                <p>&nbsp密&nbsp&nbsp&nbsp码&nbsp:&nbsp <input type="text" name="password" id="password"/></p>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="saveuser();hide();">保存</button>
            </div>

        </div>
    </div>
</div>


</body>
</html>
